<template>
  <div class="protection">
    <div class="account">
      <div class="account_title">投诉维权</div>
    </div>
    <div class="ultitle flexAround">
      <div>公示牌照片</div>
      <div>相关信息</div>
    </div>
    <a-modal v-if="visible" v-model="visible" title @ok="handleOk" :footer="null" :closable="false">
      <div style="width:100%;height:100%">
        <img :src="imgUrl" width="100%" height="100%" alt />
      </div>
    </a-modal>
    <div>
      <ul>
        <li>
          <div class="flexStart">
            <div class="li-img">
              <a-carousel arrows autoplay style="width:229px;">
                <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                  <a-icon type="left-circle" />
                </div>
                <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                  <a-icon type="right-circle" />
                </div>
                <div>
                  <h3>
                    <img :src="lb2" width="100%" height="100%" alt @click="showAmodel(2)" />
                  </h3>
                </div>
                <div @click="showAmodel(1)">
                  <h3>
                    <img :src="lb1" width="100%" height="100%" alt />
                  </h3>
                </div>
              </a-carousel>
            </div>
            <div class="flexStart2 li-content">
              <div>设立位置：施工单位食堂门口</div>
              <div>最新更新时间：2021年3月4日</div>
              <div>负责人：张筱</div>
            </div>
          </div>
        </li>
        <li>
          <div class="flexStart">
            <div class="li-img">
              <a-carousel arrows autoplay style="width:229px;">
                <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                  <a-icon type="left-circle" />
                </div>
                <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                  <a-icon type="right-circle" />
                </div>
                <div @click="showAmodel(3)">
                  <h3>
                    <img src="@/assets/homeImg/lb3.png" width="100%" height="100%" alt />
                  </h3>
                </div>
                <div @click="showAmodel(4)">
                  <h3>
                    <img src="@/assets/homeImg/lb4.png" width="100%" height="100%" alt />
                  </h3>
                </div>
              </a-carousel>
            </div>
            <div class="flexStart2 li-content">
              <div>设立位置：项目部入口</div>
              <div>最新更新时间：2021年3月4日</div>
              <div>负责人：王晓晨</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import lb1 from "@/assets/homeImg/lb1.png";
import lb2 from "@/assets/homeImg/lb2.png";
import lb3 from "@/assets/homeImg/lb3.png";
import lb4 from "@/assets/homeImg/lb4.png";
export default {
  data() {
    return {
      visible: false,
      imgUrl: "",
      lb1,
      lb2,
      lb3,
      lb4
    };
  },
  methods: {
    handleOk(e) {
      //   console.log(e);
      this.visible = false;
    },
    showAmodel(img) {
      switch (img) {
        case 1:
          this.imgUrl = this.lb1;
          break;
        case 2:
          this.imgUrl = this.lb2;
     
          break;
        case 3:
          this.imgUrl = this.lb3;
          break;
        default:
          this.imgUrl = this.lb4;

          break;
      }

      this.visible = true;
      // console.log(this.imgUrl);
    }
  }
};
</script>

<style scoped>
.title {
  color: #1890ff;
  font-size: 16px;
  margin-bottom: 10px;
}
.ultitle {
  width: 1300px;
  height: 50px;
  background: #fafafa;
  line-height: 50px;
  color: #000000d8;
  font-size: 15px;
  text-align: center;
}
.ultitle :nth-child(1) {
  width: 230px;
}
.ultitle :nth-child(2) {
  width: 900px;
}
li {
  list-style: none;
  padding: 15px 0;
  color: #333;
  border-bottom: 1px solid #ccc;
}
li:last-of-type {
  border-bottom: none;
}
.li-img {
  margin-right: 70px;
}
.li-content {
  align-items: center;
  /* vertical-align: middle; */
}
.li-content :nth-child(1) {
  width: 300px;
}
.li-content :nth-child(2) {
  width: 500px;
}
.li-content :nth-child(3) {
  width: 300px;
}
.account {
  height: 45px;
  /* border-bottom: 1px solid #ccc; */
  margin-bottom: 30px;
}
.account_title {
  width: 90px;
  height: 45px;
  font-size: 16px;
  line-height: 45px;
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
  text-align: center;
  margin-left: 30px;
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 130px;
  line-height: 130px;
  /* background: #364d79; */
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
::v-deep .ant-modal {
  width: 1000px !important;
  top: 10px;
}
::v-deep .ant-modal-body {
  padding: 0 !important;
  height: 500px;
}
</style>
